<template>
  <div class="review-list">
    <div class="page-header">
      <h2>{{ serviceName ? `${serviceName} - 服务评价` : '评价管理' }}</h2>
      <div v-if="serviceName" style="margin-top: 10px;">
        <el-button size="small" @click="backToAllReviews">返回全部评价</el-button>
      </div>
    </div>
    
    
    <div class="filters">
      <el-select v-model="ratingFilter" placeholder="评分筛选" clearable @change="loadReviews">
        <el-option label="5星" :value="5" />
        <el-option label="4星" :value="4" />
        <el-option label="3星" :value="3" />
        <el-option label="2星" :value="2" />
        <el-option label="1星" :value="1" />
      </el-select>
      <el-button @click="loadReviews">刷新</el-button>
      <el-button @click="loadStats">查看统计</el-button>
    </div>
    
    
    <div v-if="showStats" class="stats-section" style="margin-bottom: 20px;">
      <el-card>
        <h3>评价统计</h3>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-statistic title="总评价数" :value="stats.totalReviews" />
          </el-col>
          <el-col :span="4">
            <el-statistic title="平均评分" :value="stats.averageRating" :precision="1" />
          </el-col>
          <el-col :span="4">
            <el-statistic title="5星评价" :value="stats.fiveStars" />
          </el-col>
          <el-col :span="4">
            <el-statistic title="4星评价" :value="stats.fourStars" />
          </el-col>
          <el-col :span="4">
            <el-statistic title="3星评价" :value="stats.threeStars" />
          </el-col>
          <el-col :span="4">
            <el-statistic title="低评价" :value="stats.twoStars + stats.oneStar" />
          </el-col>
        </el-row>
      </el-card>
    </div>
    
    
    <el-table :data="reviews" style="width: 100%" v-loading="loading">
      <el-table-column prop="reviewId" label="评价ID" width="100" />
      <el-table-column prop="orderNo" label="订单号" width="150" />
      <el-table-column prop="userName" label="客户" width="120" />
      <el-table-column prop="serviceName" label="服务" width="120" />
      <el-table-column prop="staffName" label="服务人员" width="120" />
      <el-table-column label="评分" width="120">
        <template #default="scope">
          <el-rate v-model="scope.row.rating" disabled show-score text-color="#ff9900" />
        </template>
      </el-table-column>
      <el-table-column prop="content" label="评价内容" min-width="200">
        <template #default="scope">
          <el-tooltip :content="scope.row.content" placement="top" :disabled="!scope.row.content">
            <span>{{ scope.row.content ? (scope.row.content.length > 50 ? scope.row.content.substring(0, 50) + '...' : scope.row.content) : '无' }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="评价时间" width="120" />
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button size="small" @click="viewReview(scope.row)">查看</el-button>
          <el-button size="small" type="danger" @click="deleteReview(scope.row.reviewId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    
    <el-dialog v-model="showDetailDialog" title="评价详情" width="600px">
      <div v-if="selectedReview">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单号">{{ selectedReview.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="客户">{{ selectedReview.userName }}</el-descriptions-item>
          <el-descriptions-item label="服务">{{ selectedReview.serviceName }}</el-descriptions-item>
          <el-descriptions-item label="服务人员">{{ selectedReview.staffName }}</el-descriptions-item>
          <el-descriptions-item label="评分">
            <el-rate v-model="selectedReview.rating" disabled show-score text-color="#ff9900" />
          </el-descriptions-item>
          <el-descriptions-item label="评价时间">{{ selectedReview.createTime }}</el-descriptions-item>
        </el-descriptions>
        <div style="margin-top: 20px;">
          <h4>评价内容：</h4>
          <p>{{ selectedReview.content || '无评价内容' }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'ReviewList',
  data() {
    return {
      reviews: [],
      loading: false,
      ratingFilter: null,
      showStats: false,
      showDetailDialog: false,
      selectedReview: null,
      serviceId: null,
      serviceName: null,
      stats: {
        totalReviews: 0,
        averageRating: 0,
        fiveStars: 0,
        fourStars: 0,
        threeStars: 0,
        twoStars: 0,
        oneStar: 0
      }
    }
  },
  mounted() {
    // 检查URL参数，如果有serviceId，则显示特定服务的评价
    const serviceId = this.$route.query.serviceId
    const serviceName = this.$route.query.serviceName
    if (serviceId) {
      this.serviceId = serviceId
      this.serviceName = serviceName
    }
    this.loadReviews()
  },
  methods: {
    async loadReviews() {
      this.loading = true
      try {
        let url = '/api/reviews'
        const params = new URLSearchParams()
        
        // 如果有rating筛选
        if (this.ratingFilter) {
          params.append('rating', this.ratingFilter)
        }
        
        // 如果是查看特定服务的评价
        if (this.serviceId) {
          url = `/api/reviews/service/${this.serviceId}`
          if (this.ratingFilter) {
            params.append('rating', this.ratingFilter)
          }
        }
        
        if (params.toString()) {
          url += `?${params.toString()}`
        }
        
        const response = await api.get(url)
        if (response.success) {
          this.reviews = response.data
        } else {
          ElMessage.error('加载评价列表失败')
        }
      } catch (error) {
        console.error('加载评价失败:', error)
        ElMessage.error('加载评价列表失败')
      } finally {
        this.loading = false
      }
    },
    
    async loadStats() {
      try {
        const response = await api.get('/api/reviews/stats')
        if (response.success) {
          this.stats = response.data
          this.showStats = true
        } else {
          ElMessage.error('加载统计数据失败')
        }
      } catch (error) {
        console.error('加载统计失败:', error)
        ElMessage.error('加载统计数据失败')
      }
    },
    
    viewReview(review) {
      this.selectedReview = review
      this.showDetailDialog = true
    },
    
    async deleteReview(reviewId) {
      try {
        await ElMessageBox.confirm('确认删除此评价？删除后不可恢复', '危险操作', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'error'
        })
        
        const response = await api.delete(`/api/reviews/${reviewId}`)
        if (response.success) {
          ElMessage.success('评价已删除')
          this.loadReviews()
        } else {
          ElMessage.error('删除评价失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除评价失败:', error)
          ElMessage.error('删除评价失败')
        }
      }
    },
    
    backToAllReviews() {
      this.serviceId = null
      this.serviceName = null
      this.ratingFilter = null
      this.$router.push('/reviews')
      this.loadReviews()
    }
  }
}
</script>

<style scoped>
.review-list {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #333;
}

.filters {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.filters .el-select {
  width: 150px;
}

.stats-section {
  margin-bottom: 20px;
}
</style> 